<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



<!doctype html>
<html>
<head>
<style type="text/css">
.black_overlay{ 
display: none; 
position: absolute; 
top: 0%; 
left: 0%; 
width: 100%; 
height: 100%; 
background-color: black; 
z-index:1001; 
-moz-opacity: 0.8; 
opacity:.80; 
filter: alpha(opacity=88); 
} 
.white_content{ 
display: none; 
position: absolute; 
top: 25%; 
left: 35%; 
width: 350px; 
height: 55%; 
padding: 20px; 
border: 10px solid orange; 
background-color: white; 
z-index:1002; 
overflow: auto; 
} 
</style>
<script type="text/javascript">
function openDialog(){ 
   document.getElementById('light').style.display='block';
      document.getElementById('fade').style.display='block'
   }
    function closeDialog(){
      document.getElementById('light').style.display='none';
      document.getElementById('fade').style.display='none'
   }


</script>
    <meta charset="utf-8">
    <title>蜂窝煤旅行攻略网 ┑(￣▽ ￣)┍</title>
    <script>
    function checkaddr(){
    	var i=$("#myaddr").val();
    	if(i==""||i==null){
    		$("#addrlab").html("<font color='red'>&nbsp;&nbsp;&nbsp;×详细地址不能为空</font>")
    		return false;
    	}
    	   $("#addrlab").html("  ")
    	return true;
    	
    	
    }
    function checktel(){
    	var usertel=$("#mytel").val();
    	if(usertel.length<7){
    		$("#tellab").html("<font color='red'>&nbsp;&nbsp;&nbsp;×电话格式错误</font>")
    	return false;
    	}else if(usertel.length>11){
    	$("#tellab").html("<font color='red'>&nbsp;&nbsp;&nbsp;×电话格式错误</font>")
    	}
    	else{
    	$("#tellab").html("  ")
    		return true;
    	}
    	
    }
       function login(){
    	return checkEmail()&&checkpwd()&&checkpwd2()&&checkaddr()&&checktel();
    	
    	
    }
    	function  checkEmail(){
		
			var email=$("#myemail").val();
			if(email==""||email==null){
				$("#emaillab").html("<font color='red'>×名字不能为空</font>");
				return false;
			}
				
			if(email.length>20){
				$("#emaillab").html("<font color='red'>×名字长度不能大于20位</font>");
				return false;
			}
				
			$("#emaillab").html("<font color='green'>√名字格式正确！！！</font>");
				return true;	
				
			}
			function  checkpwd(){
				//获取密码框的内容
			//var pwd=document.getElementById("mypwd").value;
			    //采用jquery框架提供的方式获取密码框的内容
			    var pwd2=$("#mypwd").val();
			
			if(pwd2==""||pwd2==null){
			//	document.getElementById("pwdlab").innerHTML="<font color='red'>×密码不能为空</font>";
			    //采用jquery框架提供的方式获取密码框的提示标签<label>内部元素
			    $("#pwdlab").html("<font color='red'>×密码不能为空</font>");
			    return false;
			}
			
			if(pwd2.length<6){
				
				 $("#pwdlab").html("<font color='red'>×密码长度不能小于6位</font>");
				 return false;
			}if(pwd2.length>16){
				$("#pwdlab").html("<font color='red'>×密码长度不能大于16位</font>")
				
			}
			
			 $("#pwdlab").html("<font color='green'>√密码格式正确！！！</font>");
				 return true;
				
			}
			function checkpwd2(){
				var pwd1=$("#mypwd").val();
				var pwd2=$("#mypwd2").val();
				if(pwd1==pwd2){
					$("#pwdlab2").html(" ");
					return true;
					
				}
					$("#pwdlab2").html("<font color='red'>×两次密码不相同</font>");
					return false;
				
					
				}
		
				
				
		
    </script>
    <style>
        body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background: url(image/user/registerbg.jpg); }
        a { color: #50B6E5; } 
        .constr { width: 800px; margin-left: auto; margin-right: auto; }
        .regist-head { height: 60px; line-height: 60px; padding-left: 30px; background-color: #be3948; color: #fff; font-size: 18px; }
        .regist-body { min-height: 400px; padding: 100px 0; background-color: #fff; }
        .regist-main { width: 600px; margin-left: auto; margin-right: auto; }
        .regist-group { margin-top: 20px; overflow: hidden; }
        .regist-label { width: 70px; padding-top: 10px; float: left; }
        .regist-cell { display: table-cell; *display: inline-block; }
        .regist-input { height: 18px; line-height: 18px; width: 260px; padding: 10px 5px; margin: 0 10px 0 0; border: 1px solid #d0d6d9; vertical-align: top; }
        .regist-code-input { width: 130px; }
        .regist-btn { display: inline-block; width: 160px; line-height: 40px; background-color: #39b94e; color: #fff; text-align: center; text-decoration: none; }
        .regist-btn:hover { background-color: #33a646; }
        .icon-warn { display: inline-block; width: 20px; height: 21px; background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center; }
        .regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; }
        .regist-remark { position: absolute; line-height: 21px; padding-top: 9px; color: #666; }
        .regist-remark2 { position: absolute; margin-left: 298px; margin-top:-30px;color: #666; }
        .regist-warn { padding-left: 20px; color: #be3948; }
        .regist-warn >.icon-warn { position: absolute; margin-left: -20px; }
    </style>
    
<link rel="stylesheet" href="CSS/jquery.slider.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slider.min.js"></script>
</head>

<body>
<div class="constr">
    <div class="regist-head" align="center">商家入驻</div>
    <div class="regist-body">
    <div id="back">
        		<a href="sellerlogin.jsp" style="text-decoration: none; color: #AC2925; position: absolute; margin-left: 700px; margin-top: -90px; font-size: 10px">返回登录</a>
        	</div>
        <div class="regist-main">
         <form action="SellerServlet?flag=sellerregister" method="post">
            <div class="regist-group">
                <label class="regist-label" ><span class="regist-star">*</span>注册名字</label>
                <div class="regist-cell">
                    <input  class="regist-input" id="myemail" onblur="checkEmail()" placeholder="请输入您酒店或民宿的名字" name="username"><span class="regist-remark regist-warn">
                    	<i id="emaillab" name="userlab"></i>
                    </span>
                </div>
            </div>
            <div class="regist-group">
                <label class="regist-label"><span class="regist-star">*</span>密码</label>
                <div class="regist-cell">
                    <input type="password" class="regist-input" id="mypwd" onblur="checkpwd()" placeholder="请输入您的密码" name="userpwd"><span class="regist-remark regist-warn">
                    	<i id="pwdlab" ></i>
                    </span>
                </div>
            </div>
           <div class="regist-group">
                <label class="regist-label"><span class="regist-star">*</span>确认密码</label>
                <div class="regist-cell">
                    <input type="password" class="regist-input" id="mypwd2" onblur="checkpwd2()" placeholder="请再输入您的密码" name="userpwd2">
                    <span class="regist-remark2 regist-warn2">
                    <i id="pwdlab2"></i>
                 </span>
                </div>
            </div>
            <div class="regist-group">
                <label class="regist-label"><span class="regist-star">*</span>电话</label>
                <div class="regist-cell">
                    <input type="tel" class="regist-input" name="usertel" onblur="checktel()" id="mytel">
                    <i id="tellab"></i>
                </div>
            </div>
            <br>
          <!-- 地址 -->
            <div>
            	<label class="regist-label"><span class="regist-star">*</span>详细地址</label>
            	<div>
            		<input type="text" name="useraddr" class="regist-input" onblur="checkaddr()" id="myaddr">
            		<i id="addrlab"></i>
            	</div>	
            </div>
            </br>
            <!-- 上传图片 -->
            <div>
            上传您的封面&nbsp&nbsp&nbsp&nbsp<input type="file" name="userlogo">
            </div>
            <div class="regist-group">
                <label class="regist-label">&nbsp;</label>
                <div class="regist-cell">
                    <input type="checkbox" checked><label>我已阅读并同意<a href="JavaScript:void(0)" onclick ="openDialog()">蜂窝煤用户协议</a>。</label>
                    <p>
                       <button type="submit" class="regist-btn" onclick="return login()">立即注册</button>
                    </p>
                </div>
            </div>
            </form>
            <div id='light' class='white_content' >
            <div align='center'  style='width:94%; position:absolute; margin:auto;'>
            				蜂窝煤用户协议<br/>
            		一、注册前一定要先大喊ZZQDSD&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
            		二、喊一遍觉得不过瘾，可以多喊几遍<br/>
            		三、如果能饱含感情的喊出来再好不过
            </div>
           <div align='center'  style='width:94%; bottom:50px; position: fixed; position:absolute; margin:auto;'>
           <input title='关闭该浮窗' alt='关闭该浮窗' type='button' value='关闭'  onclick = 'closeDialog()'/> </div></div>
      	   <div id='fade' class='black_overlay'>
      	   </div>
        </div>
    </div>
</div>
<div id="footer" style="position: absolute; margin-left: 500px; margin-top: -80px; font-size: 13px;">
        <p>
            <span><a href="#">Copyright</a> © 2018 FengWoMei.cn <a href="index.jsp" target="_blank" title="蜂窝煤之家">蜂窝煤之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">Internet</a></span>
        </p>
        <p align="center">
            <span>All Rights Reserved.</span></p>
        <div class="clearfix">
        </div>
    </div>
</body>
</html>
